<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的书架</title>
    <link rel="stylesheet" href="/res/css/share.css" type="text/css">
    <link rel="stylesheet" href="/res/css/bookcase.css" type="text/css">
    <link rel="stylesheet" href="/res/css/msgPop.css" type="text/css">
</head>
<body>


<div id="bookcase">
    <div class="top">
        <div class="head">
            <img src="/res/img/logo.png" @click="goHome" alt="">
            <div class="head_txt">
                {{username}}：的个人书架
            </div>
            <img src="/res/img/退出.png" @click="logout" class="exit">
            <a href="#" class="head_txt" style="float: right;" @click.exact="logout">
                退出
            </a>
        </div>
    </div>

    <div class="content">
        <div class="item_con">
            <div class="item" v-for="book in books">
                <img class="img" :src="'/res/'+book.cover" alt="" @click="updateBook(book.id)">
                <div style class="banner_top">
                    {{book.title}}
                </div>
                <div class="banner_bottom">
                    {{book.author}}
                </div>
            </div>
            <div class="item">
                <img class="img" src="/res/img/加.png" alt="" @click="addBook">
                <div style="color: red" class="banner_top">
                    添加新书
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="copyright">
            <a href="#"> 版权所有©支持盗版 </a>
        </div>
    </div>

    <!--提示弹窗-->
    <div class="alert" v-show="msg !== ''">
        <div class="alert_con">
            <div class="alert_title">{{ msg }}</div>
        </div>
    </div>
</div>
<script src="/res/js/vue.js"></script>
<script src="/res/js/axios.min.js"></script>
<script>
    new Vue({
        el: "#bookcase",
        data: {
            msg: "[[${msg != null ? msg : ''}]]",
            // localhost: "[[${#httpServletRequest.getScheme() + '://' + #httpServletRequest.getServerName() + ':' + #httpServletRequest.getServerPort()}]]",

            username: "",
            books: [{id: "", title: "", author: "", cover: ""}]
        },
        methods: {
            goHome() {
                location.href = "/"
            },
            logout() {
                axios.get("/user/logout")
                // this.alertMsg("已退出当前帐号")
                location.href = "/"
            },

            addBook() {
                location.href = "/add.html"
            },
            updateBook(id) {
                location.href = "/update.html/" + id
            }
        },
        mounted() {
            axios.get("/username/" + "[[${id}]]").then(resp => {
                if (resp.data.code === 0) {
                    this.username = resp.data.data
                }
            }).catch(err => console.log(err));
            axios.get("/myBookCase/" + "[[${id}]]").then(resp => {
                if (resp.data.code === 0) {
                    this.books = resp.data.data
                }
            }).catch(err => console.log(err));
        },
        watch: {
            msg: {
                immediate: true,
                handler() {
                    setTimeout(() => {
                        this.msg = ''
                    }, 1000)
                }

            }
        }

    })
</script>
</body>
</html>